<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福利页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        .welfare_iframe{
          width: 100%;
          display:none;
          overflow-x: hidden;
        }

        .welfare_context{
            background-color: #fff;
            overflow-y:scroll;
        }
        .welfare_context1{
          height: 325px;
          width: 100%;
        }
        .welfare_context1 img{width: 100%;height: 100%}
        .welfare_context2{
          margin-left: 25px;
          margin-right: 25px;
          font-size: 14px;
          color: #101010;
          text-indent: 2em;
        }
        .welfare_context2 span{
          font-size:14px;
          color: #fabf15;
          padding:0px;
          margin:0px;
          text-indent: 0em;
        }
        .welfare_context3{
          margin: 15px 20px;
        }
        .welfare_context3_1{
          border: solid #fabf15 1.5px;
           border-radius: 8px;
           display:-webkit-box;
        }
        .welfare_context3_1_left{
          width: 60px;
          height: 60px;
          background-image: url(../image/welfare_context_box.png);
          background-repeat: no-repeat;
          background-size: 60px 60px;
          margin: 13px 9px 11px 19px;
        }
        .welfare_context3_1_rigth{
        -webkit-box-flex:1.0;
        margin-right: 5px;
        }
        .welfare_context3_1_rigth1{
          margin-top: 11px
        }
        .welfare_context3_1_rigth1 span{
              color: #fabf15;
        }
        .welfare_context3_1_rigth2{
          margin-top: 4px;
        }
        .welfare_context4{
          width: 88%;
          height: 5px;
          background-color: #e22a28
        }
        .welfare_context5{
          width: auto;
          border: solid #fabf15 1.5px;
          border-radius: 8px;
          margin-top: 15px;
          margin-left: 15px;
          padding: 8px;
        }
       .welfare_context6{
         margin: 15px 0 0 15px;
       }
       .welfare_context6_1 span{
         height: 5px;
         width: 5px;
         background-color: #fabf15;
         border-radius: 5px;
         margin-bottom: 2px;
       }

        .welfare_context7{
          height: 45px;
          font-size: 22px;
          color: #fff;
          text-align: center;
          margin: 35px 55px 60px 55px;
          background-color: #e22a28;
          border-radius: 5px;
          line-height: 45px
        }
        .welfare_context8{
            height: 40px;
        }
        .welfare_context8 img{
          height: 40px;
          width: 100%
        }

        .welfare_public_text_black1{
          font-size: 13px;
          color: #101010;
          font-weight: 700;
        }
        .welfare_public_text_black2{
          font-size: 13px;
          color: #101010;
          letter-spacing: 1px;
        }
        .welfare_public_div_1{
          margin-top: 8px;
        }

    </style>
</head>
<body>
    <iframe class="welfare_iframe" name="ifrmname" src="">
    </iframe>

    <div class="main">
        <div class="welfare_context">
          <div class="welfare_context1">
            <img src="../image/welfare_context_head.png">  </img>
          </div>
          <div class="welfare_context2">
            牛郎WiFi携手中国银行，给广大用户送福利啦。申请信用卡还有免费时长
            <span>免费时长</span>
            赠送！信用卡申请请点击该页面最底部的“马上申请”按钮。
           </div>
           <div class="welfare_context3">
               <div class="welfare_context3_1">
                 <div class="welfare_context3_1_left">
                 </div>
                 <div class="welfare_context3_1_rigth">
                     <div class="welfare_context3_1_rigth1 welfare_public_text_black1">
                       可获赠时长:<span>20</span>小时
                     </div>
                     <div class="welfare_context3_1_rigth2 welfare_public_text_black2">
                      点击底部“马上申请”按钮进入中国银行信用卡办理界面成功填写资料。
                     </div>
                 </div>
               </div>
               <div class="welfare_context3_1" style="margin-top: 16px">
                 <div class="welfare_context3_1_left">
                 </div>
                 <div class="welfare_context3_1_rigth">
                     <div class="welfare_context3_1_rigth1 welfare_public_text_black1">
                       可获赠时长:<span>300</span>小时
                     </div>
                     <div class="welfare_context3_1_rigth2 welfare_public_text_black2">
                      通过底部“马上申请”按钮进入中国银行信用卡办理界面成功申请信用卡。
                     </div>
                 </div>
               </div>
           </div>
           <div class="welfare_context4">
           </div>
           <span class="welfare_context5 welfare_public_text_black1">
             中国银行信用卡优惠集锦
           </span>
           <div class="welfare_context6">
             <div>
               <div>1、办卡有礼</div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 推荐办卡，可获赠精美礼品
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 新用户线上办卡单笔消费满99元返50元电子券
               </div>
             </div>
             <div>
               <div class="welfare_public_div_1">2、分期精彩</div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 卡户分期费率8折优惠
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 8月全城联动，汽车分期享低费率
               </div>
             </div>
             <div>
               <div class="welfare_public_div_1">3、游得精彩</div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 VISA信用卡免费租境外WiFi
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 全球订房每间获赠1万积分
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 携程订行程送880元大礼包
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 爱驾车加油充值立减10%
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 12306购票满50减15
               </div>
             </div>
             <div>
               <div class="welfare_public_div_1">4、购得精彩</div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                境外消费返现高达21%
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 山姆会员店信用卡/借记卡消费免会员卡截至8.31
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 微信、支付宝消费送双倍积分、周末双倍送，新用户消费10元赠1万积分
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 缤纷生活App二维码支付赠积分
               </div>
             </div>
             <div>
               <div class="welfare_public_div_1">5、吃得精彩</div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                美团App满100减15，外卖满30减5
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                汉堡王满15减10
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                 两人同行、畅享五折，星级酒店自助餐买一送一
               </div>
               <div class="welfare_context6_1 welfare_public_text_black2">
                 <span></span>
                1.5万积分兑大杯星巴克饮品（逢周六、日兑现两杯）
               </div>
             </div>
           </div>
           <div class="welfare_context7">
             马上申请
           </div>
           <div class="welfare_context8">
             <img src="../image/welfare_context_bottom.png"></img>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var iFrame;       //iframe  View
    var divContext;  //Context div
    var mUrl = 'https://apply.mcard.boc.cn/apply/qaiQNb';    //加载的网页地址
    var clickState = true;
    apiready = function() {
          var contextDiv = document.getElementsByClassName('welfare_context')[0];
          var chinaCreditCard = document.getElementsByClassName('welfare_context7')[0];
          iFrame = document.getElementsByClassName('welfare_iframe')[0];
          divContext = document.getElementsByClassName('welfare_context')[0];
          chinaCreditCard.onclick = function(){
            jumdeNetwork();
          }

          api.addEventListener({
              name: 'swiperight'
          }, function(ret, err) {
             console.log('向右轻扫1');
             clickState = true;
             closeWebpage();
          });

          api.addEventListener({
              name: 'welfareMainFrame'
          }, function(ret, err) {
              console.log('.......收到系统返回按钮......');
              if(clickState){
                onClickMsg('keyback','');
              }else {
                clickState = true;
                closeWebpage();
              }
          });
    };

    //给原生发送消失
    function onClickMsg(type,msg){
      api.sendEvent({
        name:'APICloud4Message',
        extra:{
        msg:msg,
        type:type
        }
      });
    }

    //判断网络情况
    function jumdeNetwork(){
      api.showProgress({
      });
      api.ajax({
        url : 'http://123.207.110.98:8080/wifi/TransferServlet',
        method : 'post',
        timeout:2,
        data : '',
      }, function(ret, err) {
        api.hideProgress();
        console.log('requestMethod--Result---ret='+JSON.stringify(ret)+'err='+JSON.stringify(err));
        if (ret) {
          clickState = false;
          onClickMsg('middle','chinaCreditCard');
          changeWebpage(mUrl);
        } else {
          api.toast({
              msg: '网络不通，请先连接网络',
              duration: 2000,
              location: 'bottom'
          });
        }
      });
    }

    //打开一个网页 隐藏其他的元素
    function changeWebpage(src){
          divContext.style.display = "none";
          iFrame.style.display = "block";
          iFrame.style.height = '100%';
          iFrame.style.position = 'absolute';
          iFrame.src = src;
    }

    //关闭 iFrame 显示其他的元素
    function closeWebpage(){
          divContext.style.display = "block";
          iFrame.style.display = "none";
    }

</script>

</html>
